<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table 组件综合演示 - Layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//unpkg.com/layui@2.9.21-rc.1/dist/css/layui.css" rel="stylesheet">
</head>
<body>
<!--
本「综合演示」包含：自定义头部工具栏、获取表格数据、表格重载、自定义模板、单双行显示、单元格编辑、自定义底部分页栏、表格相关事件与操作、与其他组件的结合等相对常用的功能，以便快速掌握 table 组件的使用。
-->

<!--添加的表单-->
<form class="layui-form" action=""  style="display: none; padding: 15px;"  id="addForm">
    <div class="layui-form-item">
        <label class="layui-form-label">桌型</label>
        <div class="layui-input-block">
            <input type="text" name="dname" required  lay-verify="required" placeholder="请输入桌型" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">img</label>
        <div class="layui-input-inline">
            <input type="text" name="img" required lay-verify="required" placeholder="请输入img" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"></div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即添加</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--编辑修改的表单-->
<form class="layui-form" action=""  style="display: none; padding: 15px;"  id="updataForm" lay-filter="updataForm">
    <div class="layui-form-item">
        <label class="layui-form-label">id</label>
        <div class="layui-input-block">
            <input type="text" name="id" readonly required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">桌型</label>
        <div class="layui-input-block">
            <input type="text" name="dname" required  lay-verify="required" placeholder="请输入桌型" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">img</label>
        <div class="layui-input-inline">
            <input type="text" name="img" required lay-verify="required" placeholder="请输入img" autocomplete="off" class="layui-input">
        </div>
        <div class="layui-form-mid layui-word-aux"></div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo2">立即修改</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--表格容器-->
<div style="padding: 16px;">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<!--头部工具条-->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
    </div>
</script>
<!--行内工具条-->
<script type="text/html" id="toolDemo">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-bg-red" lay-event="del">删除</a>
    </div>
</script>

<script src="//unpkg.com/layui@2.9.21-rc.1/dist/layui.js"></script>
<script>
    layui.use(['table', 'dropdown'], function(){
        var table = layui.table;
        var dropdown = layui.dropdown;
        var $ =layui.$;
        //将表单的数据提交到
        var form = layui.form;

        //监听提交添加
        form.on('submit(formDemo)', function(data){
            //向服务器发送请求
            $.ajax({
                url:'/desk/',
                type:'post',
                data:JSON.stringify(data.field),
                contentType:'application/json',
                dataType:'json',
                success:function(res){
                    layer.closeAll();
                    table.reload("test",{});
                }
            })
            return false;//阻止默认表单提交
        });

        //监听提交修改
        form.on('submit(formDemo2)', function(data){
            //向服务器发送请求
            $.ajax({
                url:'/desk/',
                type:'put',
                data:JSON.stringify(data.field),
                contentType:'application/json',
                dataType:'json',
                success:function(res){
                    layer.closeAll();
                    table.reload("test",{});
                }
            })
            return false;//阻止默认表单提交
        });




        // 创建渲染实例
        table.render({
            elem: '#test',
            url: 'http://localhost:8080/desk/', // 此处为静态模拟数据，实际使用时需换成真实接口
            toolbar: '#toolbarDemo',
            cellMinWidth: 80,
            page: true, //分页
            cols: [[
                {type: 'checkbox', fixed: 'left'},
                {field:'id', fixed: 'left', width:80, title: 'ID', sort: true, totalRow: '合计：'},
                {field:'dname',width:80, title: '桌型'},
                {field:'img', width:80, title: 'img'},
                {fixed: 'right', title:'操作', width: 134, minWidth: 125, templet: '#toolDemo'}
            ]]
        });



        // 工具栏事件
        table.on('toolbar(test)', function(obj){
            var id = obj.config.id;
            var checkStatus = table.checkStatus(id);
            var othis = lay(this);
            switch(obj.event){
                case 'add'://对于用户点击“添加”按钮时
                    layer.open({
                        title:'新增',
                        type:1,
                        area:['80%','80%'],
                        content:$("#addForm")
                    })
                    break;
            };
        });



        // 触发单元格工具事件
        table.on('tool(test)', function(obj){ // 双击 toolDouble
            var data = obj.data; // 获得当前行数据
            // console.log(obj)
            if(obj.event === 'edit'){
                form.val("updataForm",data)//设置表单的数据显示（回显）将当前行数据放到表单里
                layer.open({
                    title: '编辑 - id:'+ data.id,
                    type: 1,
                    area: ['80%','80%'],
                    content:$("#updataForm")
                });
            } else if(obj.event === 'del'){
                // 当事件=删除时
                //弹个警告窗
                layer.confirm('真的删除行 [id: '+ data.id +'] 么', function(index){
                    obj.del(); // 删除对应行（tr）的DOM结构
                    layer.close(index);
                    $.ajax({
                        url:'/desk/'+data.id,
                        type:'delete',
                        dataType:'json',
                        success:function (res) {
                            console.log(res)
                            if(res.codd==200){
                                layer.msg("删除成功");
                            }
                        }
                    })// 向服务端发送删除指令
                });
            }
        });
    });
</script>
</body>
</html>